<template>
  <div>
    <div class="editHeight">
      <div class="dataModel">
        <div class="dataHead">
          <div class="dataHeadTit dataHeadTitop">
            <div>
              <img src="../assets/images/point.png" alt="" />
              户籍信息
            </div>
            <div class="dataEdit">
              <div v-show="isEdit">
                <el-button
                  icon="el-icon-check"
                  circle
                  @click="toSubmit"
                ></el-button>
              </div>
              <div v-show="!isEdit">
                <el-button
                  icon="el-icon-edit"
                  circle
                  @click="toEdit"
                ></el-button>

                <el-button
                  icon="el-icon-close"
                  circle
                  @click="toBack"
                ></el-button>
              </div>
            </div>
          </div>
          <img class="splitLine" src="../assets/images/Divider2.png" />
        </div>
        <div class="layerList1">
          <div>
            <img class="detailAvatar1" src="../assets/images/avatar.png" />
          </div>
          <div class="layerContent">
            <div class="layerContentHead">
              <div class="layerText">姓名：</div>
              <div class="layerData">{{ detailEdit.zpHouseholdName }}</div>
            </div>
            <div class="layerContentHead">
              <div class="layerText">身份证：</div>
              <div class="layerData">{{ detailEdit.zpHouseholdId }}</div>
            </div>
            <div class="layerContentHead">
              <div class="layerText">地址：</div>
              <div class="layerData">{{ detailEdit.zpHouseholdAdress }}</div>
            </div>
            <div class="layerContentHead">
              <div class="layerText">电话：</div>
              <div class="layerData">{{ detailEdit.zpHouseholdPhone }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="dataModel">
        <div class="dataHead">
          <div class="dataHeadTit">
            <img src="../assets/images/point.png" alt="" />
            犯罪经历
          </div>
          <img class="splitLine" src="../assets/images/Divider2.png" />
        </div>
        <div class="editorContent">
          <div v-show="!isEdit" class="edittxt">
            <div v-html="detailEdit.zpHouseholdCriminal"></div>
          </div>
          <div v-show="isEdit">
            <editor
              ref="editor"
              :value="detailEdit.zpHouseholdCriminal"
            ></editor>
          </div>
        </div>
      </div>
      <div class="dataModel">
        <div class="dataHead">
          <div class="dataHeadTit">
            <img src="../assets/images/point.png" alt="" />
            管控措施
          </div>
          <img class="splitLine" src="../assets/images/Divider2.png" />
        </div>
        <div class="editorContent">
          <div v-if="!isEdit" class="edittxt">
            <div v-html="detailEdit.zpHouseholdMeasure"></div>
          </div>
          <div v-show="isEdit">
            <editor
              ref="editor1"
              :value="detailEdit.zpHouseholdMeasure"
            ></editor>
          </div>
        </div>
      </div>
      <div class="dataModel">
        <div class="dataHead">
          <div class="dataHeadTit">
            <img src="../assets/images/point.png" alt="" />
            帮扶情况
          </div>
          <img class="splitLine" src="../assets/images/Divider2.png" />
        </div>
        <div class="editorContent">
          <div v-if="!isEdit" class="edittxt">
            <div v-html="detailEdit.zpHouseholdHelp"></div>
          </div>
          <div v-show="isEdit">
            <editor ref="editor2" :value="detailEdit.zpHouseholdHelp"></editor>
          </div>
        </div>
      </div>
      <div class="dataModel">
        <div class="dataHead">
          <div class="dataHeadTit">
            <img src="../assets/images/point.png" alt="" />
            其他说明
          </div>
          <img class="splitLine" src="../assets/images/Divider2.png" />
        </div>
        <div class="editorContent">
          <div v-if="!isEdit" class="edittxt">
            <div v-html="detailEdit.zpHouseholdOther"></div>
          </div>
          <div v-show="isEdit">
            <editor ref="editor3" :value="detailEdit.zpHouseholdOther"></editor>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Basicdata from "./data";
import editor from "./editor.vue";
export default {
  name: "detail",
  components: {
    editor,
  },
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formData: {},
      isEdit: false,
    };
  },
  computed: {
    detailEdit() {
      return this.detail;
    },
  },
  mounted() {
    this.detailEdit.isEdit = false;
    this.$nextTick(function () {
      this.init();
    });
  },
  methods: {
    toEdit() {
      this.isEdit = true;
    },
    init() {
      this.$refs.editor.setHtml(this.detailEdit.zpHouseholdCriminal);
      this.$refs.editor1.setHtml(this.detailEdit.zpHouseholdMeasure);
      this.$refs.editor2.setHtml(this.detailEdit.zpHouseholdHelp);
      this.$refs.editor3.setHtml(this.detailEdit.zpHouseholdOther);
    },
    toSubmit() {
      this.isEdit = false;
      this.detailEdit.zpHouseholdCriminal = this.$refs.editor.getHtml();
      this.detailEdit.zpHouseholdMeasure = this.$refs.editor1.getHtml();
      this.detailEdit.zpHouseholdHelp = this.$refs.editor2.getHtml();
      this.detailEdit.zpHouseholdOther = this.$refs.editor3.getHtml();
      let param = {
        criminal_info: this.$refs.editor.getHtml(),
        measure_info: this.$refs.editor1.getHtml(),
        help_info: this.$refs.editor2.getHtml(),
        other_info: this.$refs.editor3.getHtml(),
        zp_household_id: this.detailEdit.zpHouseholdId,
      };
      this.$axios.setHouseholdInfo(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("信息更新成功!");
        } else {
          this.$message.error("信息更新失败，请重试");
        }
      });
    },
    toBack() {
      this.$emit("toBack", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.editHeight {
  height: 814px;
  background: url("../assets/images/rightBg.png");
  background-repeat: no-repeat;
  overflow-y: auto;
  color: #fff;
  .layerList1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin: 0 30px;
    .detailAvatar1 {
      width: 90px;
      height: 120px;
      // background: #0178fc;
      vertical-align: top;
      border-radius: 10px;
    }
    .layerContent {
      width: 100%;
      .layerContentHead {
        display: flex;
        justify-content: flex-start;
        // align-items: center;
        margin-top: 5px;
        .layerText {
          color: #d1faff;
          width: 70px;
        }
        .layerData {
          width: 255px;
        }
      }
    }
  }
  .dataModel {
    cursor: default;
    margin-bottom: 20px;
    .dataHead {
      text-align: center;
      font-size: 22px;
      font-weight: 400;
      height: 58px;
      .dataHeadTit {
        text-align: left;
        margin: 0 30px 20px 30px;
      }
      .dataHeadTitop {
        margin: 10px 30px 20px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .splitLine {
        position: relative;
        top: -28px;
      }
    }
  }
}
.editHeight::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/*滚动条里面小方块样式*/
.editHeight::-webkit-scrollbar-thumb {
  border-radius: 100px;
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.3);
}
/*滚动条里面轨道样式*/
.editHeight::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: transparent;
}
.icon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataEdit {
  display: flex;
  justify-content: flex-end;
}
.editorContent {
  font-size: 16px;
  margin-left: 30px;
  margin-right: -3px;
  width: 432px;
  overflow-y: auto;
  overflow-x: hidden;
  .edittxt {
    max-height: 270px;
    width: 414px;
    // overflow-y: auto;
    // overflow-x: hidden;
  }
}
.edittxt img {
  height: 150px;
}
.editorContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
/*滚动条里面小方块样式*/
.editorContent::-webkit-scrollbar-thumb {
  border-radius: 100px;
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.3);
}
/*滚动条里面轨道样式*/
.editorContent::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: transparent;
}
</style>
